/* 基础样式设置 */
body {
    padding: 0;              /* 清除内边距 */
    margin: 0;               /* 清除外边距 */
    box-sizing: border-box;  /* 盒模型设置为border-box */
}

html,
body {
    height: 100%;            /* 高度占满整个视口 */
    background-size: cover;  /* 背景图片自适应大小 */
    backdrop-filter: blur(50px); /* 背景模糊效果 */
    overflow: hidden;        /* 隐藏溢出内容 */
}

/* 上部容器 - 包含唱片和介绍区域 */
.upper-container {
    width: 80%;              /* 宽度占父容器80% */
    padding-left: 10%;       /* 左侧内边距10% */
    height: 80%;             /* 高度占父容器80% */
}

/* 唱片效果容器 */
.record-container {
    width: 50%;              /* 宽度占父容器50% */
    height: 100%;            /* 高度占父容器100% */
    display: flex;           /* 使用flex布局 */
    align-items: center;     /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    float: left;             /* 左浮动 */
}

/* 唱片背景 */
.record-bg {
    background-color: black; /* 背景黑色 */
    display: flex;           /* 使用flex布局 */
    align-items: center;     /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    width: 500px;            /* 宽度500px */
    height: 500px;           /* 高度500px */
    border-radius: 500px;    /* 圆形 */
}

/* 唱片图片 */
#record-img {
    background-image: url("../img/record1.jpg"); /* 唱片图片路径 */
    background-size: 100% 100%;                /* 图片自适应大小 */
    display: flex;                            /* 使用flex布局 */
    align-items: center;                      /* 垂直居中对齐 */
    justify-content: center;                  /* 水平居中对齐 */
    width: 250px;                             /* 宽度250px */
    height: 250px;                            /* 高度250px */
    border-radius: 250px;                     /* 圆形 */
}

/* 唱片中心小圆点 */
.record-center {
    background-color: black;  /* 背景黑色 */
    width: 20px;              /* 宽度20px */
    height: 20px;             /* 高度20px */
    border-radius: 20px;      /* 圆形 */
}

/* 音乐介绍容器 */
.introduction-container {
    width: 50%;               /* 宽度占父容器50% */
    height: 100%;             /* 高度占父容器100% */
    display: flex;            /* 使用flex布局 */
    align-items: center;      /* 垂直居中对齐 */
    justify-content: center;  /* 水平居中对齐 */
    float: left;              /* 左浮动 */
}

/* 文本内容容器 */
.text-container {
    width: 80%;               /* 宽度占父容器80% */
    padding-left: 20%;        /* 左侧内边距20% */
}

/* 音乐标题 */
#music-title {
    color: rgba(255, 255, 255, 0.888); /* 白色半透明文字 */
    font-size: 4rem;                   /* 字体大小4rem */
    line-height: 6rem;                 /* 行高6rem */
}

/* 作者信息容器 */
.author-container {
    color: rgb(171, 171, 171); /* 灰色文字 */
    font-size: medium;          /* 中等字体大小 */
}

/* 音频控件 */
.audio {
    width: 100%;               /* 宽度占父容器100% */
}

/* 播放器容器 */
.audio-box {
    width: 100%;               /* 宽度占父容器100% */
    height: 20%;               /* 高度占父容器20% */
    display: flex;             /* 使用flex布局 */
    align-items: center;       /* 垂直居中对齐 */
    justify-content: center;   /* 水平居中对齐 */
    overflow: hidden;          /* 隐藏溢出内容 */
}

/* 音频控制器容器 */
.audio-container {
    width: 90%;                /* 宽度占父容器90% */
}

/* 进度条样式 */
.a-progress {
    width: 100%;               /* 宽度占父容器100% */
    color: #42b680;            /* 主色调为绿色 */
    background-color: transparent; /* 背景透明 */
    border-radius: 10px;       /* 圆角10px */
    margin-bottom: 10px;       /* 底部外边距10px */
}

/* 总进度条容器 */
.pgs-total {
    width: 100%;               /* 宽度占父容器100% */
    height: 16px;              /* 高度16px */
    background-color: transparent; /* 背景透明 */
    border-radius: 10px;       /* 圆角10px */
    position: relative;        /* 相对定位 */
}

/* 总进度条背景 */
.a-progress .pgs-total:after {
    content: '';               /* 伪元素内容为空 */
    position: absolute;        /* 绝对定位 */
    left: 0;                   /* 左侧对齐 */
    right: 0;                  /* 右侧对齐 */
    top: 7px;                  /* 顶部距离7px */
    bottom: 7px;               /* 底部距离7px */
    background-color: #bbbbbb; /* 背景为灰色 */
    border-radius: 10px;       /* 圆角10px */
    z-index: -1;               /* 层级-1 */
}

/* 播放进度条 */
.a-progress .pgs-total .pgs-play:before {
    content: '';               /* 伪元素内容为空 */
    position: absolute;        /* 绝对定位 */
    top: 7px;                  /* 顶部距离7px */
    bottom: 7px;               /* 底部距离7px */
    left: 0;                   /* 左侧对齐 */
    right: 0;                  /* 右侧对齐 */
    background-color: #42b680; /* 背景为绿色 */
    border-radius: 10px;       /* 圆角10px */
    z-index: 1;                /* 层级1 */
}

/* 播放进度容器 */
.a-progress .pgs-total .pgs-play {
    height: 100%;              /* 高度占父容器100% */
    position: relative;        /* 相对定位 */
    border-radius: 10px;       /* 圆角10px */
}

/* 控制按钮容器 */
.a-controls {
    width: 100%;               /* 宽度占父容器100% */
}

/* 时间显示容器 */
.time-container {
    width: 30%;                /* 宽度占父容器30% */
    float: left;               /* 左浮动 */
    color: white;              /* 白色文字 */
    font-weight: 300;          /* 字体粗细300 */
    line-height: 50px;         /* 行高50px */
}

/* 已播放时间 */
.played-time {
    left: 15px;                /* 左侧距离15px */
    text-align: left;          /* 左对齐 */
}

/* 总时间 */
.audio-time {
    right: 15px;               /* 右侧距离15px */
    text-align: right;         /* 右对齐 */
}

/* 中间控制按钮容器 */
.center-button-container {
    width: 40%;                /* 宽度占父容器40% */
    float: left;               /* 左浮动 */
    display: flex;             /* 使用flex布局 */
    align-items: center;       /* 垂直居中对齐 */
    justify-content: center;   /* 水平居中对齐 */
}

/* 中间图标样式 */
.center-icon {
    float: left;               /* 左浮动 */
    width: 30px;               /* 宽度30px */
    height: 30px;              /* 高度30px */
    margin-left: 10px;         /* 左侧外边距10px */
    margin-right: 10px;        /* 右侧外边距10px */
}

/* 鼠标悬停效果 */
.center-icon:hover {
    opacity: 0.7;              /* 透明度70% */
}

/* 鼠标点击效果 */
.center-icon:active {
    opacity: 0.6;              /* 透明度60% */
}

/* 播放模式图标 */
.mode {
    background-image: url("../img/mode1.png"); /* 模式图标路径 */
    background-size: 100% 100%;              /* 图片自适应大小 */
}

/* 上一首图标 */
.s-left {
    background-image: url("../img/下一首.png"); /* 上一首图标路径 */
    background-size: 100% 100%;             /* 图片自适应大小 */
}

/* 播放按钮 */
.icon-play {
    float: left;               /* 左浮动 */
    width: 50px;               /* 宽度50px */
    height: 50px;              /* 高度50px */
    background-image: url("../img/继续播放.png"); /* 播放图标路径 */
    background-size: 100% 100%;              /* 图片自适应大小 */
}

/* 暂停按钮 */
.icon-pause {
    float: left;               /* 左浮动 */
    width: 50px;               /* 宽度50px */
    height: 50px;              /* 高度50px */
    background-image: url("../img/暂停.png"); /* 暂停图标路径 */
    background-size: 100% 100%;             /* 图片自适应大小 */
}

/* 下一首图标 */
.s-right {
    background-image: url("../img/上一首.png"); /* 下一首图标路径 */
    background-size: 100% 100%;             /* 图片自适应大小 */
}

/* 音量图标 */
.volume {
    background-image: url("../img/音量.png"); /* 音量图标路径 */
    background-size: 100% 100%;            /* 图片自适应大小 */
}

/* 底部按钮容器 */
.bottom-button-container {
    width: 30%;                /* 宽度占父容器30% */
    padding-top: 10px;         /* 顶部内边距10px */
    float: left;               /* 左浮动 */
    text-align: right;         /* 右对齐 */
}

/* 底部图标样式 */
.bottom-icon {
    float: right;              /* 右浮动 */
    width: 20px;               /* 宽度20px */
    height: 20px;              /* 高度20px */
    margin-left: 10px;         /* 左侧外边距10px */
    margin-right: 10px;        /* 右侧外边距10px */
}

/* 鼠标悬停效果 */
.bottom-icon:hover {
    opacity: 0.7;              /* 透明度70% */
}

/* 鼠标点击效果 */
.bottom-icon:active {
    opacity: 0.6;              /* 透明度60% */
}

/* MV按钮 */
.MV {
    background-image: url("../img/MV.png"); /* MV图标路径 */
    background-size: 100% 100%;           /* 图片自适应大小 */
}

/* 播放速度显示 */
.speed {
    margin-left: 10px;         /* 左侧外边距10px */
    margin-right: 10px;        /* 右侧外边距10px */
    float: right;              /* 右浮动 */
    font-weight: 300;          /* 字体粗细300 */
    color: white;              /* 白色文字 */
}

/* 鼠标悬停效果 */
.speed:hover {
    opacity: 0.7;              /* 透明度70% */
    cursor: default;           /* 默认光标 */
}

/* 鼠标点击效果 */
.speed:active {
    opacity: 0.6;              /* 透明度60% */
    cursor: default;           /* 默认光标 */
}

/* 播放列表按钮 */
.list {
    background-image: url("../img/列表.png"); /* 列表图标路径 */
    background-size: 100% 100%;            /* 图片自适应大小 */
}

/* 关闭列表遮罩层 */
.close-list {
    display: none;               /* 默认隐藏 */
    position: fixed;             /* 固定定位 */
    height: 100%;                /* 高度占满视口 */
    left: 0;                     /* 左侧对齐 */
    top: 0;                      /* 顶部对齐 */
    width: 75%;                  /* 宽度占视口75% */
}

/* 音乐列表 */
.music-list {
    display: none;               /* 默认隐藏 */
    position: fixed;             /* 固定定位 */
    height: 100%;                /* 高度占满视口 */
    right: 0;                    /* 右侧对齐 */
    top: 0;                      /* 顶部对齐 */
    width: 25%;                  /* 宽度占视口25% */
    background-color: rgb(29, 40, 32); /* 深绿色背景 */
}

/* 音乐列表容器 */
.music-list-container {
    width: 100%;                 /* 宽度占父容器100% */
}

/* 音乐列表标题 */
.music-list-title {
    color: white;                /* 白色文字 */
    font-size: 2rem;             /* 字体大小2rem */
    font-weight: 300;            /* 字体粗细300 */
    padding: 10% 15% 0% 15%;     /* 内边距 */
}

/* 分隔线 */
.line {
    height: 1px;                 /* 高度1px */
    width: 70%;                  /* 宽度占父容器70% */
    border: none;                /* 无边框 */
    border-top: 1px dashed #4d806b; /* 顶部虚线边框 */
}

/* 所有列表项 */
.all-list div {
    height: 50px;                /* 高度50px */
    line-height: 50px;           /* 行高50px */
    color: white;                /* 白色文字 */
    font-weight: 300;            /* 字体粗细300 */
    padding: 0% 15% 0% 15%;      /* 内边距 */
}

/* 列表项鼠标悬停效果 */
.all-list div:hover {
    background-color: rgb(27, 37, 30); /* 背景色变化 */
    cursor: default;              /* 默认光标 */
}

/* 列表显示动画 */
.list-card-show {
    animation: showAni;           /* 应用showAni动画 */
    animation-duration: 1s;       /* 动画持续时间1秒 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
    -webkit-animation-fill-mode: forwards; /* 兼容webkit内核 */
}

/* 列表隐藏动画 */
.list-card-hide {
    animation: hideAni;           /* 应用hideAni动画 */
    animation-duration: 1s;       /* 动画持续时间1秒 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
    -webkit-animation-fill-mode: forwards; /* 兼容webkit内核 */
}

/* 唱片旋转动画 */
.rotate-play {
    animation: rotateAni 10s infinite linear; /* 应用rotateAni动画，10秒一圈，无限循环，匀速 */
    animation-play-state: paused; /* 动画默认暂停 */
    animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
    -webkit-animation-fill-mode: forwards; /* 兼容webkit内核 */
}

/* 列表隐藏动画定义 */
@keyframes hideAni {
    from { transform: translateX(0%); }    /* 从0%位置开始 */
    to { transform: translateX(100%); }    /* 移动到100%位置 */
}

/* 列表显示动画定义 */
@keyframes showAni {
    from { transform: translateX(100%); }  /* 从100%位置开始 */
    to { transform: translateX(0%); }      /* 移动到0%位置 */
}

/* 唱片旋转动画定义 */
@keyframes rotateAni {
    from { transform: rotate(0deg); }      /* 从0度开始旋转 */
    to { transform: rotate(360deg); }      /* 旋转到360度 */
}

/* 音量控制滑块样式 */
#volumn-togger {
    width: 100px;                /* 宽度100px */
    height: 2px;                 /* 高度2px */
    appearance: none;            /* 去除默认样式 */
    background-color: #dcdcdc;   /* 背景灰色 */
    outline: none;               /* 去除轮廓 */
    overflow: hidden;            /* 隐藏溢出内容 */
    border-radius: 15px;         /* 圆角15px */
    box-shadow: inset 0 0 5px rgb(91, 91, 91); /* 内部阴影 */
}

/* 音量控制滑块拖动块样式 */
#volumn-togger::-webkit-slider-thumb {
    -webkit-appearance: none;    /* 去除默认样式 */
    width: 1px;                  /* 宽度1px */
    height: 5px;                 /* 高度5px */
    border-radius: 50%;          /* 圆形 */
    background: #42b680;         /* 绿色背景 */
    cursor: pointer;             /* 指针光标 */
    border: 4px solid #33333300; /* 透明边框 */
    box-shadow: -407px 0 0 400px #42b680; /* 左侧阴影实现填充效果 */
}